<template>
  <el-dialog title="分配菜单" :visible.sync="visible" width="30%" @close="closeHandle">
    <el-row :gutter="20">
      <el-form :model="role"  :label-width="formLabelWidth">
        <el-form-item   prop="id">
          <el-input v-show="false"  v-model="role.id" ></el-input>
        </el-form-item>

        <el-col :span="12">
          <el-form-item label="角色名称" prop="name">
            <el-input disabled  v-model="role.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="角色代码" prop="value">
            <el-input disabled v-model="role.value" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>


    <el-tree
      show-checkbox
      :data = "menus"
      node-key="id"
      ref="tree"
      accordion
      :props="defaultProps">
      <span slot-scope ="{ node, data }">
          <span>{{ generateTitle(node.label) }}</span>
      </span>
    </el-tree>


    <div slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="submitEdit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { assignMenus } from '@/api/sys/role/'
  import { getSysMenuList,getMenusTreeByRoleId } from '@/api/sys/menu/'
  import { generateTitle } from '@/utils/i18n'

  export default {
    data() {

      return {
        visible: false,
        role:{
        },
        menus:[],
        defaultCheckedKeys:[],
        formLabelWidth:'80px',
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf:'leaf',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
              return false;
            }else{
              return true;
            }
          }
        },
      }
    },
    methods: {
      generateTitle,
      init(row){
        let that =this;
        this.visible =true;

        that.role = Object.assign({},row);
        this.getMenus();
      },

      getMenusTreeByRoleIdHandle(id){
        getMenusTreeByRoleId(id).then(result=>{
            let {data,code,msg} = result.data;
            if(code === 0){
              this.setSelectMenus(data);
            }
        }).catch(error=>{

        });
      },
      setSelectMenus(data){

        let that = this;
        data.forEach(function (item) {
          if(item.children == null || item.children.length==0){
            that.defaultCheckedKeys.push(item.id);
          }else{
            that.setSelectMenus(item.children);
          }

        });
        /**
         * 设置被选中
         */
        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
      },
      submitEdit(){
        let that = this;
        that.role.menuIds=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());

        assignMenus(that.role).then(function (result) {
          let {code,msg,data} = result.data;
          if(code == '0'){
            that.$message({
              type: 'success',
              message: msg
            });
            that.closeHandle();

          }else{
            that.$message.error(msg);
          }
        }).catch(function (error) {
          that.$message.error(error.response.data.msg);
        });

      },
      getMenus(){
        let that = this;
        if(this.menus.length ==0){
          this.$nextTick(()=> {
            var param={
              userName: this.$store.getters.name,
              menuType: '0,1,2',
              isTree: true
            }
            getSysMenuList(param).then(function (result) {
              let {data,code,msg} = result.data;
              if(code  === 0){
                data.forEach((item,index) =>{
                  that.menus.push(item);
                });

                that.getMenusTreeByRoleIdHandle(that.role.id)
              }

            }).catch(function (error) {

            });
          })
        }else{
          this.getMenusTreeByRoleIdHandle(this.role.id)
        }

      },

      closeHandle(){
        this.defaultCheckedKeys=[]
        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
        this.visible=false;
      }
    }



  }

</script>
